<template>
<div class="movie-item" @click="toDetail">
    <img :src="handleCoverUrl(movie.movie_cover)" :alt="movie.movie_name" @error="toggleUrl" />
    <span class="time-tag">{{movie.movie_on_time}}</span>
    <div class="movie-info">
        <h3 class="name">{{movie.movie_name}}</h3>
        <p class="country"><strong>国家: </strong>{{handleMovieInfo(movie.movie_country)}}</p>
        <p class="type"><strong>类型: </strong>{{handleMovieInfo(movie.movie_type)}}</p>
        <p class="main_character"><strong>主演: </strong>{{handleMovieInfo(movie.movie_main_character)}}</p>
    </div>
</div>
</template>

<script>
import {
    handleCoverUrl,
    handleMovieInfo
} from "../utils/extends"
export default {
    name: "movie-item",
    props: {
        movie: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        const toggleUrl = (event) => {
            event.target.src = "/movie.jpg";
        }
        const toDetail = () => {
            window.location.hash = `/detail/${props.movie.id}`
        }
        return {
            handleCoverUrl,
            handleMovieInfo,
            toggleUrl,
            toDetail
        }
    }
}
</script>

<style lang="sass" scoped>
@import "@/assets/styles/componentStyle/movieItem.scss";
</style>
